<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <div class="form-left-right">
            <el-form
              style="max-width: 1200px"
              :model="state.form"
              :rules="rules"
              label-position="right"
              ref="formRef"
            >
              <el-form-item label="发布名称：" prop="fabumingcheng">
                <el-input size="large" v-model="state.form.fabumingcheng" />
              </el-form-item>
              <el-form-item label="类型：" prop="leixing">
                <el-select
                  v-model="state.form.leixing"
                  size="large"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in state.type"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="发布公司：" prop="gongsi">
                <el-select
                  v-model="state.form.gongsi"
                  size="large"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in state.company"
                    :key="item.gysNo"
                    :label="item.gongsimingcheng"
                    :value="item.gysNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="地区：">
                <el-cascader
                  @change="selectCity"
                  style="width: 452px !important"
                  size="large"
                  :options="state.cities"
                  :props="state.cityProps"
                  :placeholder="state.cityPlaceholder"
                />
              </el-form-item>
              <el-form-item label="招标项目：">
                <el-button size="large" @click="selectProject" type="primary"
                  >选择项目</el-button
                >
                <span style="margin-left: 20px">当前选择：{{ nowChoose }}</span>
              </el-form-item>
              <el-form-item
                class="vue-editor"
                label="招标内容："
                prop="zhaobiaoneirong"
              >
                <editor
                  :initValue="state.form.zhaobiaoneirong"
                  @onVal="onVal"
                />
              </el-form-item>
              <el-form-item
                v-if="state.check === '1' || state.shenhe === '1'"
                label="状态："
              >
                <el-radio-group v-model="state.form.shangjia">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <el-dialog
        class="list-dialog"
        show-close="false"
        width="80%"
        v-model="state.show"
        center
        style="padding: 0 30px"
      >
        <el-table
          ref="multipleTable"
          :data="state.projectList"
          max-height="600"
          border
          :header-cell-style="{ background: '#F8F8F9' }"
          style="width: 100%; margin-top: 20px"
          @cell-click="clickCell"
        >
          <el-table-column label="选择" width="65" align="center">
            <template #default="scope">
              <el-radio-group v-model="state.form.xmNo">
                <el-radio :label="scope.row.xmNo">{{ `` }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="编号"
            prop="xmNo"
          ></el-table-column>
          <el-table-column
            align="center"
            label="项目名称"
            prop="xiangmumingcheng"
          ></el-table-column>
          <el-table-column
            align="center"
            label="项目类型"
            prop="xiangmuleixing"
          ></el-table-column>
          <el-table-column
            align="center"
            label="城市"
            prop="chengshi"
          ></el-table-column>
          <el-table-column
            align="center"
            label="项目地址"
            prop="xiangmudizhi"
          ></el-table-column>
          <el-table-column
            align="center"
            label="运营商"
            prop="yunyingshang"
          ></el-table-column>
          <el-table-column
            align="center"
            label="状态"
            prop="zhuangtai"
          ></el-table-column>
        </el-table>
        <el-form-item class="note-button-group mt50">
          <el-button size="large" @click="state.show = false">取消</el-button>
          <el-button class="ml50" size="large" type="primary" @click="confirm">
            确定
          </el-button>
        </el-form-item>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetDeploy,
  AddDeploy,
  EditDeploy,
  GetProjectSelect,
} from "@/api/deploy";
import { GetDictionaryTree, GetDistrict } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { GetProviderOptions } from "@/api/provider";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const nowChoose = ref("");
const rules = {
  fabumingcheng: [
    {
      required: true,
      message: "请输入发布名称",
      trigger: "blur",
    },
  ],
  leixing: [
    {
      required: true,
      message: "请选择发布类型",
      trigger: "change",
    },
  ],
  gongsi: [
    {
      required: true,
      message: "请选择关联公司",
      trigger: "change",
    },
  ],
  zhaobiaoneirong: [
    {
      required: true,
      message: "请输入招标内容",
      trigger: "blur",
    },
  ],
};
const state = reactive({
  form: {
    fabumingcheng: "",
    leixing: "",
    gongsi: "",
    diqu: [],
    xmNo: "",
    // 富文本
    zhaobiaoneirong: "",
    shangjia: 0,
  },
  // 类型下拉
  type: [],
  // 关联公司
  company: [],
  // 办公城市回显
  cityPlaceholder: "请选择办公城市",
  cities: [],
  cityProps: {
    label: "label",
    value: "id",
  },
  // 项目信息选择表格
  projectList: [],
  show: false,
  // 是否为管理员 0:不是 1:是
  check: localStorage.getItem("check"),
  // 是否审核通过
  shenhe: route.query.shenhe || -1,
});
// 根据id查询内容
const GetInfo = () => {
  if (route.query.type == "edit") {
    GetDeploy({ id: route.query.id }).then((res) => {
      if (res.code === 4201) {
        state.form = res.data;
        chooseInfo();
      }
    });
  }
};
// 选择招标项目
const selectProject = () => {
  GetProjectSelect().then((res) => {
    if (res.code == 4201) {
      state.projectList = res.data.records;
      state.total = res.data.total;
    }
  });
  state.show = true;
};
// 类型下拉查询
const GetType = async () => {
  const res = await GetDictionaryTree({ dicModel: "xiangmuxinxifabuleixing" });
  if (res.code == 4201) {
    state.type = res.data;
  }
};
const getCityList = async () => {
  // 城市列表下拉查询
  const res = await GetDistrict({ parentCode: 0, regionLevel: "city" });
  if (res.code == 4201) {
    state.cities = res.data;
    if (route.query.type == "edit" && state.form.diqu?.length > 0) {
      let str = "";
      const arr = state.form.diqu;
      // 国家
      let arr1 = {};
      // 省份
      let arr2 = {};
      // 城市
      let arr3 = {};
      // 区
      let arr4 = {};
      arr1 = res.data.find((item) => {
        return item.id == arr[0];
      });
      arr2 = arr1.children.find((item) => {
        return item.id == arr[1];
      });
      arr3 = arr2.children.find((item) => {
        return item.id == arr[2];
      });
      arr4 = arr3.children.find((item) => {
        return item.id == arr[3];
      });
      str =
        arr1.label + ` /${arr2.label}` + ` /${arr3.label}` + ` /${arr4.label}`;
      state.cityPlaceholder = str;
    }
  }
};
// 选择地区
const selectCity = (value) => {
  state.form.diqu = value;
};
// 点击单元格
const clickCell = (row) => {
  state.form.xmNo = row.xmNo;
};
// 筛选当前选择项目
const chooseInfo = () => {
  if (state.form.xmNo) {
    GetProjectSelect().then((res) => {
      if (res.code == 4201) {
        state.projectList = res.data.records;
        state.total = res.data.total;
        state.projectList.forEach((item) => {
          if (item.xmNo == state.form.xmNo) {
            nowChoose.value = item.xiangmumingcheng;
          }
        });
      }
    });
  }
};
// 确定选择招标项目
const confirm = () => {
  if (!state.form.xmNo) {
    baseMsg("请选择项目", false);
  } else {
    state.show = false;
    chooseInfo();
  }
};
// 关联公司下拉查询
const GetCompany = async () => {
  const res = await GetProviderOptions();
  if (res.code == 4201) {
    state.company = res.data;
  }
};
// 富文本编辑器
const onVal = (val) => {
  state.form.zhaobiaoneirong = val;
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (route.query.type == "add") {
        AddDeploy(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("新增项目信息发布信息成功");
            router.go(-1);
          }
        });
      }
      if (route.query.type == "edit") {
        EditDeploy(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("编辑项目信息发布信息成功");
            router.go(-1);
          }
        });
      }
    }
  });
};
getCityList();
GetType();
GetInfo();
GetCompany();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
}
.el-form-item {
  display: flex;
  align-items: center;
  &.vue-editor {
    align-items: baseline;
  }
}
:deep(.form-left-right) {
  width: 100%;
  .el-form-item .el-form-item__label {
    min-width: 120px;
    margin-bottom: 0 !important;
  }
}
</style>
<style lang="scss">
.button-group {
  .el-form-item__content {
    width: 100% !important;
    justify-content: center;
  }
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
